<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../plugins/vue.min.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
</head>
<body>

<h3>1.v-bind:class(2)</h3>
<!--为html标记绑定样式单class属性-->
<div id="myApp1">
    <div :class="myClass">红色文本</div>
    <button @click="btnClick">改变class吧</button>
</div>
<script>
    var myApp1 = new Vue({
        el: '#myApp1',
        data: {
            myClass: {
                active: true,
                big: true,
            },
        },
        methods: {
            btnClick: function(){
                this.myClass.active = !this.myClass.active;
                this.myClass.big = !this.myClass.big;
            },
        },
    });
</script>

<hr>

<h3>2.v-if-else应用</h3>
<!--为html标记绑定样式单class属性-->
<div id="myApp2">
    <h1 v-if="result == 0">成绩未公布</h1>
    <h1 v-else-if="result < 60">{{result}}分 - 考试不及格</h1>
    <h1 v-else-if="result < 80">{{result}}分 - 还需努力</h1>
    <h1 v-else>{{result}}分 - 考得不错，玩游戏吧！</h1>
    <button @click="btnClick">考试成绩</button>
</div>
<script>
    var myApp2 = new Vue({
        el: '#myApp2',
        data: {
            result: 0
        },
        methods: {
            btnClick: function(){
                this.result = Math.round(Math.random() * 100);
            },
        },
    });
</script>

<hr>

<h3>3.v-show应用</h3>
<!--标记是否显示html元素。(注意：v-show设置的标记在html DOM中不会消失)-->
<div id="myApp3">
    <h1 v-show="result">任天堂新一代主机Switch</h1>
    <button @click="btnClick">显示按钮</button>
</div>
<script>
    var myApp3 = new Vue({
        el: '#myApp3',
        data: {
            result: true
        },
        methods: {
            btnClick: function(){
                this.result = !this.result;
            },
        },
    });
</script>

<hr>

<h3>4.v-for应用</h3>
<!--循环数组元素，整理内容显示到页面上-->
<div id="myApp4">
    <ul>
        <li v-for="(game, index) in games">({{index+1}}) {{game.title}} / 售价：{{game.price}}元</li>
    </ul>
</div>
<script>
    var myApp4 = new Vue({
        el: '#myApp4',
        data: {
            games: [
                {title:"勇者斗恶龙",price:500},
                {title:"库跑卡丁车",price:400},
                {title:"马里奥世界",price:550},
            ]
        },
    });
</script>
<hr>

<h3>5.v-for应用（2）</h3>
<!--循环数组元素，整理内容显示到页面上.key:value-->
<div id="myApp5">
    <h1>JS对象迭代</h1>
    <div v-for="(value, key) in mygame">
        {{ key }} : {{ value }}
    </div>
</div>
<script>
    var myApp5 = new Vue({
        el: '#myApp5',
        data: {
            mygame: {
                title: "乌贼娘2代",
                price: 350,
                pubdate: "2017年夏季",
                category: "射击",
                agerange: "全年龄",
            },
        },
    });
</script>
<hr>

<h3>6.v-on等事件绑定</h3>
<!--循环数组元素，整理内容显示到页面上.key:value-->
<div id="myApp6">
    <h1>事件处理器</h1>
    <input id="txtName" v-on:keyup="txtKeyup($event)">
    <button id="btnOK" v-on:click="btnClick($event)">OK</button>
</div>
<script>
    var myApp6 = new Vue({
        el: '#myApp6',
        data: {},
        methods: {
            txtKeyup: function(event){
                this.debugLog(event);
            },
            btnClick: function(event){
                this.debugLog(event);
            },
            debugLog:function(event){
                alert(
                    event.srcElement.tagName,
                    event.srcElement.id,
                    event.srcElement.innerHTML,
                    event.key?event.key:""
                );
            },
        },
    });
</script>
<hr>

<h3>7.v-model对象绑定</h3>
<!--为表单控件元素创建双向数据绑定。（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置回JS变量）-->
<div id="myApp7">
    <h1>表单控件绑定</h1>
    <input type="text" v-model="message" placeholder="来呀，编辑我吧！">
    <p>Message is: {{ message }}</p>
    <textarea v-model="message" placeholder="加入多行编辑" rows="8" cols="34"></textarea>
</div>
<script>
    var myApp7 = new Vue({
        el: '#myApp7',
        data: {
            message: "我爱马里奥",
        },
        methods: {
        },
    });
</script>
<hr>

<h3>8.v-model复选框</h3>
<!--为表单控件元素创建双向数据绑定。（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置回JS变量）-->
<div id="myApp8">
    <h1>表单复选框</h1>
    <input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames">
    <label for="生化危机7">生化危机7</label>
    <input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">
    <label for="模拟飞行">模拟飞行</label>
    <input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">
    <label for="塞尔达传说">塞尔达传说</label>
    <br>
    <p>您选择的游戏是: {{ checkedGames }}</p>
</div>
<script>
    var myApp8 = new Vue({
        el: '#myApp8',
        data: {
            checkedGames: []
        },
        methods: {
        },
    });
</script>
<hr>

<h3>9.v-model单选框</h3>
<!--表单单选按钮绑定-->
<div id="myApp9">
    <h1>表单单选按钮</h1>

    <h3>选择性别</h3>
    <input type="radio" id="male" value="男" v-model="pickedSex">
    <label for="male">男</label>
    <br>
    <input type="radio" id="female" value="女" v-model="pickedSex">
    <label for="female">女</label>

    <h3>选择爱好</h3>
    <input type="radio" id="game" value="玩游戏" v-model="pickedHobby">
    <label for="game">玩游戏</label>
    <br>
    <input type="radio" id="movie" value="看电影" v-model="pickedHobby">
    <label for="movie">看电影</label>

    <h3>选择结果</h3>
    <p>性别: {{ pickedSex }}</p>
    <p>爱好: {{ pickedHobby }}</p>

</div>
<script>
    var myApp9 = new Vue({
        el: '#myApp9',
        data: {
            pickedSex: "",
            pickedHobby: "",
        },
        methods: {
        },
    });
</script>
<hr>

<h3>10.v-model下拉框</h3>
<!--表单下拉框绑定-->
<div id="myApp10">
    <h3>你最喜欢的NBA球星是：</h3>
    <select v-model="likedNBAStar" style="width:210px;">
        <option>科比</option>
        <option>詹姆斯</option>
        <option>哈登</option>
        <option>库里</option>
        <option>杜兰特</option>
    </select>

    <h3>我的全明星：</h3>
    <select v-model="likedNBAStars" multiple style="width:210px;height:210px;">
        <option>阿德托昆博</option>
        <option>怀特赛德</option>
        <option>阿尔德里奇</option>
        <option>戴维斯</option>
        <option>格里芬</option>
        <option>詹姆斯</option>
    </select>

    <h3>选择结果</h3>
    <p>我最最喜欢: {{ likedNBAStar }}</p>
    <p>我的全明星: {{ likedNBAStars }}</p>

</div>
<script>
    var myApp10 = new Vue({
        el: '#myApp10',
        data: {
            likedNBAStar: "",
            likedNBAStars: [],
        },
        methods: {
        },
    });
</script>
<hr>

<h3>11.lazy.number.trim</h3>
<!--用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。-->
<div id="myApp11">
    <h1>用户注册</h1>

    <div>
        <label for="username">用户：</label>
        <input type="text" id="username" v-model.lazy="username" @change="checkUsername">
        <span v-if="checkUsernameOK">可注册</span>
    </div>
    <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" v-model.number="age">
    </div>
    <div>
        <label for="content">个人简介：</label><br/>
        <textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
    </div>

    <h4>信息区</h4>
    <p>{{username}}</p>
    <p>{{age}}</p>
    <p><pre>{{content}}</pre></p>
</div>
<script>
    var myApp11 = new Vue({
        el: '#myApp11',
        data: {
            username: "",
            checkUsernameOK: false,
            age: "",
            content: "",
        },
        methods: {
            checkUsername: function(){
                if (this.username.length > 0) this.checkUsernameOK = true;
                else this.checkUsernameOK = false;
            },
        },
    });
</script>
<hr>

<h3>12.lazy.number.trim</h3>
<!--用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。-->
<div id="myApp12">
    <h1>用户注册</h1>

    <div>
        <label for="username">用户：</label>
        <input type="text" id="username" v-model.lazy="username" @change="checkUsername">
        <span v-if="checkUsernameOK">可注册</span>
    </div>
    <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" v-model.number="age">
    </div>
    <div>
        <label for="content">个人简介：</label><br/>
        <textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
    </div>

    <h4>信息区</h4>
    <p>{{username}}</p>
    <p>{{age}}</p>
    <p><pre>{{content}}</pre></p>
</div>
<script>
    var myApp11 = new Vue({
        el: '#myApp11',
        data: {
            username: "",
            checkUsernameOK: false,
            age: "",
            content: "",
        },
        methods: {
            checkUsername: function(){
                if (this.username.length > 0) this.checkUsernameOK = true;
                else this.checkUsernameOK = false;
            },
        },
    });
</script>
<hr>
</body>
</html>